import React, { Component } from "react";
import "./index.css";

class Students extends Component {
    constructor() {
        super()
        this.state = {
            students: [],
            flg: false
        }
        this.students()
    }
    render() {
        let { students, flg } = this.state;
        return <div className="box">
            <button type="button" onClick={this.addStudent.bind(this)}>添加</button>
            <ul className="list">
                {
                    students.map((item, index) => {
                        return <li key={index}>
                            <span>{item.name}</span>
                            <span>{item.score}</span>
                            <p onClick={this.changeMsg.bind(this, index)}>修改</p>
                            <p onClick={this.delMsg.bind(this, index)}>删除</p></li>
                    })
                }
            </ul>
            {
                flg ? <div className="mask">
                    <div className="add">
                        <input ref="studentName" type="text" placeholder="学生姓名" defaultValue={this.state.msg.name} datavalues={this.state.msg.index} />
                        <input ref="studentScore" type="text" placeholder="学生成绩" defaultValue={this.state.msg.score} datavalues={this.state.msg.index} />
                        <button type="button" onClick={this.submitMsg.bind(this)}>确认</button>
                    </div>
                </div> : null
            }
        </div>

    }
    students() {
        fetch("/text").then((response) => response.json()).then((data) => {
            this.setState({ students: [...data.data] })
        })
    }
    addStudent(props) {
        this.setState({ flg: !this.state.flg })
        if (props) {
            this.setState({ msg: props })
        }
    }
    submitMsg() {
        this.setState({ flg: !this.state.flg })
        let studentName = this.refs.studentName.value;
        let studentScore = this.refs.studentScore.value;
        let index=this.refs.studentName.getAttribute("datavalues")
        if (this.refs.studentName.getAttribute("datavalues") || this.refs.studentScore.getAttribute("datavalues")) {
            fetch("/change", {
                method: "POST",
                body: JSON.stringify({
                    name: studentName,
                    score: studentScore,
                    index:index
                })
            }).then((response) => response.json()).then((data) => {
                if (data.code === 1) {
                    console.log(data)
                    let students = [...data.data];
                    this.setState({ students: students })
                }
            })
        } else {
            fetch("/add", {
                method: "POSt",
                body: JSON.stringify({
                    name: studentName,
                    score: studentScore
                })
            }).then((response) => response.json()).then((data) => {
                if (data.code === 1) {
                    let students = [...this.state.students];
                    students.push({ name: studentName, score: studentScore })
                    this.setState({ students: students })
                }
            })
        }

    }
    changeMsg(index) {
        let props = {...this.state.students[index],index:index};
        this.addStudent(props)
    }
    delMsg(index) {
        fetch("/del", {
            method: "POSt",
            body: JSON.stringify({
                index:index
            })
        }).then((response) => response.json()).then((data) => {
            if (data.code === 1) {
                let students=[...this.state.students]
                students.splice(index,1)
                this.setState({students:students})
            }
        })
    }
}
export default Students;